<template>
  <div>
    <!-- <h1>品牌管理</h1> -->
    <el-card class="box-card">
      <!-- 位于卡片顶部的“添加品牌”按钮（注：1.属性“icon”的功能是“在按钮中的文字前面添加图标”；2.根据仓库中是否具有相应的按钮权限，通过“v-if”来动态的判断是否需要渲染这个按钮）↓ -->
      <!-- <el-button type="primary" size="default" @click="handlerForAddTrademark" icon="Plus" v-if="userStore.buttons.includes('btn.Trademark.add')">添加品牌</el-button> -->
      <!-- <el-button type="primary" size="default" @click="handlerForAddTrademark" icon="Plus">添加品牌</el-button> -->
      <el-button type="primary" size="default" @click="handlerForAddTrademark" icon="Plus" v-haveThisButton="`btn.Trademark.add`">添加品牌</el-button>
      <!-- 表格组件：被用于展示“已有品牌的数据”（注：“border”是“布尔属性”，被用于“为表格组件添加纵向边框”）↓ -->
      <el-table style="margin: 10px 0;" border :data="anArrayThatStoresTrademarkThatHaveBeenHad">
        <el-table-column label="序号" width="80px" align="center" type="index"></el-table-column>
        <!-- 注：虽然组件“el-table-column”默认使用元素“div”来展示数据，但是如果开发者不想使用div元素来展示数据，那么也可以通过作用域插槽来传递页面结构↓ -->
        <!-- <el-table-column label="品牌名称" align="center" prop="tmName"></el-table-column> -->
        <el-table-column label="品牌名称" align="center">
          <!-- 注：插槽“#default”被用于展示数据，其中“row”是与每一行对应的数据对象，“$index”是每一行在表格中的索引（注：此处因为使用了“解构赋值”，所以必须书写大括号，否则数据无法被渲染到表格中）↓ -->
          <template #default="{ row, $index }">
            <!-- <h1>123</h1> -->
            <!-- <h1>{{ row }}</h1> -->
            <!-- <pre>{{ row }}</pre> -->
            <!-- 使用元素“pre”来展示数据↓ -->
            <!-- <pre style="color:red">{{ row.tmName }}</pre> -->
            <pre>{{ row.tmName }}</pre>
          </template>
        </el-table-column>
        <!-- <el-table-column label="品牌LOGO" align="center"prop="logoUrl"></el-table-column> -->
        <el-table-column label="品牌LOGO" align="center">
          <template #default="{ row, $index }">
            <img :src="row.logoUrl" alt="图片地址已失效" style="width: 100px;height: 100px;" />
          </template>
        </el-table-column>
        <el-table-column label="品牌操作" align="center">
          <template #default="{ row, $index }">
            <!-- <el-button type="primary" size="small" icon="Edit" @click="handlerForUpdateTrademark">编辑</el-button> -->
            <el-button type="primary" size="small" icon="Edit"
              @click="($event) => handlerForUpdateTrademark(row)" v-haveThisButton="`btn.Trademark.update`">编辑</el-button>
            <el-popconfirm width="250px" :icon="Delete" icon-color="#626AEF" :title="`您确定要删除品牌——${row.tmName}吗？`"
              @cancel="handlerForCancelButtonInThePopconfirm" @confirm="handlerForConfirmButtonInThePopconfirm(row.id)">
              <template #reference>
                <el-button type="danger" size="small" icon="Delete" v-haveThisButton="`btn.Trademark.remove`">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器组件↓ -->
      <!-- 注：1.在“vue3”中，指令“v-model”可以实现“父子组件间数据同步”功能；
              2.属性“v-model:current-page”被用于设置“分页器的当前所在页码”
              3.属性“v-model:page-size”被用于设置“每一页展示多少条数据”
              4.属性“page-sizes”被用于设置“被用于设置每页显示多少条数据”的选择器中，在下拉菜单中出现的选项
              5.属性“small”被用于设置“是否使用小型分页器样式”（注：该属性已不被推荐使用，自“elementPlus”的“2.7.6”版本起，官方推荐使用属性“size”（该属性可接受的值为“large”、“default”、“small”）来替代它）
              6.属性“background”被用于设置“是否为分页器按钮添加背景色”
              7.属性“layout”被用于设置分页器组件的布局，其中各个子组件的名称使用逗号作为分隔符（箭头的作用是把箭头指向的子组件顶到页面中分页器组件的最右端）
              8.属性“pager-count”被用于设置分页器可显示的最大页码按钮数（即页码按钮的数量）。 当总页数超过该值时，多出的页码按钮会被折叠↓  -->
      <el-pagination v-model:current-page="currentPageNumber" v-model:page-size="currentPageSize" :pager-count="9"
        :page-sizes="[3, 5, 7, 9]" :background="true" @current-change="handlerForChangePageNumber"
        @size-change="handlerForChangePageSize" layout="prev, pager, next, jumper,->,sizes,total"
        :total="totalQuantityOfTrademarkThatHaveBeenHad" />
    </el-card>
    <!-- 对话框组件（这个组件会在做“添加品牌”与“修改已有品牌”的业务时使用）↓ -->
    <!-- <el-dialog v-model="isThedialogVisible" title="添加品牌" width="500"> -->
    <!-- 通过判断表单对象“aFormForAddOrUpdateTrademark”的属性“id”是否有值来决定对话框的标题中的内容应该是“添加品牌”，还是应该是“修改品牌”↓ -->
    <el-dialog v-model="isThedialogVisible" :title="aFormForAddOrUpdateTrademark.id ? '修改品牌' : '添加品牌'" width="500">
      <el-form style="width: 80%;" :model="aFormForAddOrUpdateTrademark" :rules="rules"
        ref="refOfFormForAddOrUpdateTrademark">
        <!-- <el-form style="width: 80%;" ref="refOfFormForAddOrUpdateTrademark"> -->
        <el-form-item label="品牌名称" label-width="100px" prop="tmName">
          <el-input placeholder="请输入品牌名称" v-model="aFormForAddOrUpdateTrademark.tmName"></el-input>
        </el-form-item>
        <el-form-item label="品牌LOGO" label-width="100px" prop="logoUrl">
          <!-- 注：1.“el-upload”组件提供的属性“action”被用于设置“上传图片时请求的URL”（注：在路径上要添加公共前缀“/api”，否则代理服务器不会向后台服务器转发请求，导致上传图片失败）
           2.属性“show-file-list”被用于控制“是否显示已上传文件列表”；3.属性“before-upload”是在上传文件之前被调用的钩子函数，其参数为“被上传的文件”， 若返回false或者返回 Promise 且被 reject，则停止上传（注：这个钩子函数可以被用于“约束被上传的文件的格式、大小等”）
           4.属性“on-success”是在“文件被上传成功”时被调用的钩子函数↓ -->
          <el-upload class="avatar-uploader" action="/api/admin/product/fileUpload" :show-file-list="false"
            :on-success="aFunctionRunningAtThefileBeSuccessfullyUploaded"
            :before-upload="aFunctionRunningAtBeforeFileUpload">
            <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar" /> -->
            <img v-if="aFormForAddOrUpdateTrademark.logoUrl" :src="aFormForAddOrUpdateTrademark.logoUrl"
              class="avatar" />
            <el-icon v-else class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
      <!-- 通过位于表单底部的具名插槽“footer”来传递并在页面上显示“确定”和“取消”按钮↓ -->
      <template #footer>
        <el-button type="primary" @click="handlerForConfirmButton">确定</el-button>
        <el-button type="default" @click="handlerForCancelButton">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup name="Trademark">
import { ref, onMounted, reactive, nextTick } from 'vue';
import { requestTheListOfTrademarkThatHaveBeenHad, requestAddOrUpdateTrademark,requestDeleteTrademark } from "@/api/product/trademark"; // 导入“获取已有品牌列表”的API函数
import type { typeOfPropertyNamedRecordsInTheResponceDataOfGetTheListOfTrademarkThatHaveBeenHad, typeOfResponceDataOfGetTheListOfTrademarkThatHaveBeenHad, typeOfTrademarkThatHaveBeenHad } from "@/api/product/trademark/type"; // 导入为“获取已有品牌数据列表”接口的响应数据中的“records”属性定义的TS类型
import type { UploadProps } from 'element-plus' // 导入“上传文件”组件的TS类型
import { ElMessage } from 'element-plus' // 导入“消息提示”组件
import { Delete } from '@element-plus/icons-vue';
 // 导入并获取涉及“用户信息”的仓库对象，以便后续渲染组件时判断当前用户是否有权限使用某个按钮
// import useUserStore from "@/store/modules/user";
// let userStore = useUserStore();
let currentPageNumber = ref<number>(1); // 被用于定义“分页器”的“当前所在页码”的变量（注：尖括号内部的“number”被用于表示这个变量的“数据类型”）
let currentPageSize = ref<number>(3); // 被用于定义“当前状态下分页器的每一页展示多少条数据”的变量
let totalQuantityOfTrademarkThatHaveBeenHad = ref<number>(0); // 被用于定义“已有品牌的总数”的变量
// let anArrayThatStoresTrademarkThatHaveBeenHad = ref<any[]>([]) // 声明一个数组，用于存储已有品牌的数据（注：尖括号内部的“any[]”被用于表示这个数组的元素可以是任意类型）
let anArrayThatStoresTrademarkThatHaveBeenHad = ref<typeOfPropertyNamedRecordsInTheResponceDataOfGetTheListOfTrademarkThatHaveBeenHad>([])
let isThedialogVisible = ref<boolean>(false); // 被用于定义“对话框组件是否可见”的变量
// 被用于定义“表单数据”的变量↓
let aFormForAddOrUpdateTrademark = reactive<typeOfTrademarkThatHaveBeenHad>({
  tmName: '',
  logoUrl: '',
})
let refOfFormForAddOrUpdateTrademark = ref<any>(null); // 被用于定义“表单的引用”的变量（注：通过此变量可以获取到“el-form”组件的实例对象）
// 表单校验规则对象↓
let rules = ({
  tmName: [
    // 注：“ trigger: 'blur'”表示在“文本框失去焦点时”触发此校验规则↓
    { required: true, trigger: 'blur', validator: aValidatorForTmName },
  ],
  logoUrl: [
    { required: true, validator: aValidatorForLogoUrl }
  ],
})
/**
 * 函数“aValidatorForTmName”是表单校验规则对象中的“tmName”属性的校验函数，被用于验证品牌名称是否符合要求
 * @param rules 表单校验规则对象
 * @param value 用户在文本框中输入的内容（即表单中“tmName”属性的值）
 * @param callback 回调函数，被用于在验证通过时放行，在验证失败时返回错误信息
 */
function aValidatorForTmName(rules: any, value: string, callback: Function) {
  // console.log("自定义表单校验规则中的校验函数被调用了")
  if (value.trim().length >= 2) {
    callback() // 放行（即验证通过）
  } else {
    callback(new Error("品牌名称的长度位数不能小于2位")) // 返回错误信息（即验证失败）
  }
}
/**
 * 函数“aValidatorForLogoUrl”是表单校验规则对象中的“logoUrl”属性的校验函数，被用于验证品牌LOGO是否符合要求
 * @param rules 表单校验规则对象
 * @param value logo图片被上传到服务器后，服务器返回的该图片所在的URL地址
 * @param callback 回调函数，被用于在验证通过时放行，在验证失败时返回错误信息
 */
function aValidatorForLogoUrl(rules: any, value: string, callback: Function) {
  console.log("校验品牌LOGO的函数被调用了")
  console.log(value) // http://server.atguigu.cn:9000/sph/20250302/小米商标.jpg
  if (value) {
    // 如果进入了这个代码块，那么说明用户已经上传了品牌LOGO图片，此时通过回调函数直接放行即可↓
    callback()
  } else {
    callback(new Error("必须上传品牌LOGO图片"))
  }
}
/**
 * 函数“aFunctionRunningAtBeforeFileUpload”被用于处理“在开始上传文件之前，执行的操作”
 * @param rawFile 被上传的文件对象
 */
const aFunctionRunningAtBeforeFileUpload: UploadProps['beforeUpload'] = (rawFile) => {
  console.log(rawFile) // File {uid: 1740905702443, name: '小米商标.jpg', lastModified: 1740902608410, lastModifiedDate: Sun Mar 02 2025 16:03:28 GMT+0800 (中国标准时间), webkitRelativePath: '', …}
  // console.log("文件上传前的钩子函数被调用了")
  // 限制只能上传图片文件，文件格式为.jpg/.png/.gif，且限制文件大小不超过4MB↓
  if (rawFile.type == "image/jpeg" || rawFile.type == "image/jpeg" || rawFile.type == "image/gif") {
    if (rawFile.size / 1024 / 1024 <= 4) {
      return true; // 返回true，此时文件会被上传到服务器上
    } else {
      ElMessage({
        type: 'error',
        message: "被上传的文件大小不能超过4MB",
      })
    }
  } else {
    ElMessage({
      type: 'error',
      message: "请上传格式为jpg/png/gif的图片文件",
    })
    return false; // 若不返回false，则文件会被上传到服务器上
  }
}
/**
 * 函数“aFunctionRunningAtThefileBeSuccessfullyUploaded”被用于处理“文件上传成功时，执行的操作”
 * @param response 在这次上传文件，发起post请求时，服务器响应的数据对象
 * @param uploadFile 服务器返回的被上传的文件对象（其中的“response”属性中的属性“data”的值就是该文件被成功地上传到服务器后，服务器返回的该文件的URL）
 */
const aFunctionRunningAtThefileBeSuccessfullyUploaded: UploadProps['onSuccess'] = (response, uploadFile) => {
  // console.log(response) // {code: 200, message: '成功', data: 'http://server.atguigu.cn:9000/sph/20250302/小米商标.jpg', ok: true}
  // console.log(uploadFile) // Proxy(Object) {name: '小米商标.jpg', percentage: 100, status: 'success', size: 52135, raw: File, …}
  // 将“被上传的图片的URL”赋值给变量“aFormForAddOrUpdateTrademark”中的属性“logoUrl”（即收集图片被上传到服务器后的所在地址），以供将来做“新增品牌”或“修改品牌”的业务时使用↓
  aFormForAddOrUpdateTrademark.logoUrl = uploadFile.response.data;
  // 调用表单组件提供的“clearValidate”方法来清理“logoUrl”字段的表单验证信息（注：“clearValidate”方法被用于“清理某个字段的表单验证信息”，在此处，它的参数“logoUrl”被用于指定要清理验证信息的字段）↓
  refOfFormForAddOrUpdateTrademark.value.clearValidate('logoUrl')
}
/**
 * 获取已有品牌列表的函数
 */
// 注：为参数“pageNumber”和“pageSize”分别赋予默认值“1”和“3”（这样做的原因是：当用户第一次进入页面时，需要默认展示第一页的数据，且设置每页展示3条数据）↓
async function getTheListOfTrademarkThatHaveBeenHad(pageNumber: number = 1, pageSize: number = 3) {
  currentPageNumber.value = pageNumber
  // let result:any = await requestTheListOfTrademarkThatHaveBeenHad(pageNumber, pageSize)
  let result: typeOfResponceDataOfGetTheListOfTrademarkThatHaveBeenHad = await requestTheListOfTrademarkThatHaveBeenHad(pageNumber, pageSize)
  // console.log(result)
  if (result.code === 200) {
    totalQuantityOfTrademarkThatHaveBeenHad.value = result.data.total; // 将“已有品牌的总数”赋值给变量“totalQuantityOfTrademarkThatHaveBeenHad”
    anArrayThatStoresTrademarkThatHaveBeenHad.value = result.data.records; // 将“已有品牌的数据”赋值给变量“anArrayThatStoresTrademarkThatHaveBeenHad”
  }
}
// 在“组件被挂载完毕”时，执行“获取已有品牌列表的函数”，获取位于第一页的三个已有品牌的数据（注：该操作被封装在“onMounted”钩子中）↓
onMounted(() => {
  // getTheListOfTrademarkThatHaveBeenHad(currentPageNumber.value, currentPageSize.value)
  getTheListOfTrademarkThatHaveBeenHad() // 注：调用该函数时如果不想传参，则需要为参数“pageNumber”和“pageSize”都赋予默认值
})
/**
 * 函数“handlerForChangePageNumber”被用于处理“分页器组件的当前所在页码发生变化时，执行的操作”
 * @param newPageNumber 新的页码值（注：该参数被定义为“number”类型）
 */
// 注：对于自定义事件“分页器组件的当前所在页码发生变化时，执行的操作”，分页器组件会把“用户当前点击的页码”作为参数传递给自定义事件的处理函数↓
function handlerForChangePageNumber(newPageNumber: number) {
  // console.log(`新的页码数是${newPageNumber}`)
  // 在“分页器组件的当前所在页码发生变化时”，执行获取已有品牌列表的操作，展示已有品牌的数据↓
  getTheListOfTrademarkThatHaveBeenHad(newPageNumber, currentPageSize.value)
}
/**
 * 函数“handlerForChangePageSize”被用于处理“当每一页可显示的数据条目的数量发生变化时，执行的操作”
 * @param newPageSize 新的页码值（注：该参数被定义为“number”类型）
 */
// 注：对于自定义事件“当每一页可显示的数据条目的数量发生变化时，执行的操作”，分页器组件会把“用户当前选择的每页展示多少条数据”作为参数传递给自定义事件的处理函数↓
function handlerForChangePageSize(newPageSize: number) {
  // console.log(`新的每一页可显示的数据条目的数量是${newPageSize}`)
  // 当用户选择每页展示多少条数据时，将“分页器组件的当前所在页码”重置为第一页（注：这样做是为了保证用户在切换“每页展示多少条数据”时，不出现因为“每页可显示的数据条目的数量发生变化”而导致用户原来的所在页面消失的情况）↓
  // currentPageNumber.value = 1;
  // getTheListOfTrademarkThatHaveBeenHad(currentPageNumber.value, newPageSize)
  getTheListOfTrademarkThatHaveBeenHad()
}
/**
 * 函数“handlerForAddTrademark”被用于处理用户点击添加品牌按钮时，执行的操作
 * @param event 事件对象（注：该参数被定义为“Event”类型）
 */
function handlerForAddTrademark(event: Event) {
  isThedialogVisible.value = true // 将变量“isThedialogVisible”的值设置为true，使对话框组件显示出来
  // 把表单中收集到的数据清空（注：由于id属性的数据类型为“数字”，所以在清空数据时不能把它重置为“空字符串”，而应该把它重置为“0”）↓
  aFormForAddOrUpdateTrademark.id = 0 // 清空表单数据中的“品牌ID”（这样做是为了防止用户点击“添加品牌”按钮前先点击“修改品牌”按钮，导致表单的id属性有值，进而导致用户点击“添加品牌”按钮时，对话框的标题中仍显示“修改品牌”）
  aFormForAddOrUpdateTrademark.tmName = '' // 清空表单数据中的“品牌名称”
  aFormForAddOrUpdateTrademark.logoUrl = '' // 清空表单数据中的“品牌图片”
  // console.log(aFormForAddOrUpdateTrademark.value) // 注：用户第一次点击“添加品牌”按钮时，针对这一行代码，控制台中输出的内容是“undefined”（原因是在此时表单组件还未被渲染）
  // console.log(refOfFormForAddOrUpdateTrademark.value.clearValidate('tmName')) // 注：由于上述原因↑，针对这一行代码，控制台中将输出内容为“Uncaught TypeError: Cannot read properties of null (reading 'clearValidate')”的错误信息。修复此错误的第一种方法是利用“TypeScript”提供的特性——使用“可选链操作符”（即“?”，如下面的这一行代码所示）↓
  // refOfFormForAddOrUpdateTrademark.value?.clearValidate('tmName') // 这行代码表示“如果refOfFormForAddOrUpdateTrademark.value不为null（表单组件已被渲染成功，表单组件的实例对象已被成功获取），则调用clearValidate方法”
  // refOfFormForAddOrUpdateTrademark.value?.clearValidate('logoUrl') // 清空表单数据中的“品牌图片”
  // refOfFormForAddOrUpdateTrademark.value.resetFields() // 通过表单的引用，调用“重置字段”的方法来清空已收集到的数据
  /* 第二种方法：由于在“vue”中，DOM的更新是异步进行的，所以可以通过导入并调用“nextTick”方法来确保在DOM更新完毕后，再执行清空表单数据的操作（注：文心快码解释了“ nextTick 函数的用途”和“Vue 采用异步更新 DOM 的策略”的原因：
     1.nextTick 的主要用途是在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，可以确保已经获取到更新后的 DOM）；
     2.Vue 采用异步更新 DOM 的策略，主要是出于性能优化的考虑。a.批量更新： 当多个数据变化时，Vue 会将这些变化“收集”起来，在下一个“tick”（即下一个事件循环）中统一进行 DOM 更新。这样可以避免多次不必要的 DOM 操作，提高渲染性能。
     b.避免无限循环： 如果 Vue 在数据变化后立即更新 DOM，并且这些 DOM 变化又触发了数据的变化（比如在 DOM 更新后读取某些值并基于这些值修改数据），可能会导致无限循环。通过异步更新，Vue 可以确保所有的数据变化都被“收集”并一次性处理，从而避免这种情况。
     c.事件循环机制： Vue 使用 JavaScript 的事件循环机制（基于 Promise 的微任务队列）来实现异步更新。当数据变化时，Vue 会将这些变化放入一个队列中，并在当前事件循环结束后，在下一个事件循环开始时执行队列中的所有 DOM 更新操作。
     综上所述，nextTick 函数是 Vue 提供的一个非常有用的工具，它允许您在 DOM 更新完成后执行代码，而 Vue 采用异步更新 DOM 的策略则是为了提高渲染性能和避免潜在的问题。↓ */
  nextTick(() => {
    // console.log(refOfFormForAddOrUpdateTrademark.value) // Proxy(Object) {validate: ƒ, validateField: ƒ, resetFields: ƒ, clearValidate: ƒ, scrollToField: ƒ, …}
    // 清空触发表单校验规则时显示的“错误提示信息”↓
    refOfFormForAddOrUpdateTrademark.value.clearValidate('tmName')
    refOfFormForAddOrUpdateTrademark.value.clearValidate('logoUrl')
  })
}
/**
 * 函数“handlerForUpdateTrademark”被用于处理用户点击修改品牌按钮时，执行的操作
 * @param event 事件对象（注：该参数被定义为“Event”类型）
 * @param row 被点击的那一行的数据对象（这个对象中存储了“当前已有的品牌”的数据）（注：该参数被定义为“typeOfTrademarkThatHaveBeenHad”类型）
 */
/* function handlerForUpdateTrademark(event: Event) {
  isThedialogVisible.value = true
} */
function handlerForUpdateTrademark(row: typeOfTrademarkThatHaveBeenHad) {
  // console.log(row) // Proxy(Object) {id: 1755, createTime: '2025-03-02 11:00:03', updateTime: '2025-03-02 11:00:03', tmName: '小米2025030218:58', logoUrl: 'http://server.atguigu.cn:9000/sph/20250302/小米商标.jpg'}
  isThedialogVisible.value = true
  nextTick(() => {
    refOfFormForAddOrUpdateTrademark.value.clearValidate('tmName')
    refOfFormForAddOrUpdateTrademark.value.clearValidate('logoUrl')
    /* aFormForAddOrUpdateTrademark.id = row.id
    // 展示已有品牌的数据↓
    aFormForAddOrUpdateTrademark.tmName = row.tmName
    aFormForAddOrUpdateTrademark.logoUrl = row.logoUrl */
    // 通过“ES6”提供的方法“Object.assign”来合并对象，将已有品牌的数据赋值给表单数据，实现与上面的被注释掉的三行代码相同的功能，以简化代码↓
    Object.assign(aFormForAddOrUpdateTrademark, row)
  })
}
/**
 * 函数“handlerForConfirmButton”被用于处理用户点击对话框组件中的确定按钮时，执行的操作
 * @param event 
 */
async function handlerForConfirmButton(event: Event) {
  // 在发送请求前，通过“el-form”组件提供的“validate”方法来先对表单数据进行校验（注：“validate”方法被用于“对整个表单的内容进行验证”。它接收一个回调函数，或返回Promise）↓
  // 通过使用“async...await”语法，可以让“validate”方法返回的Promise对象等待被解析成功且被执行完毕（即所有的表单项都被校验通过）后再继续向下执行代码↓
  await refOfFormForAddOrUpdateTrademark.value.validate()
  // let isTheResultChecked = refOfFormForAddOrUpdateTrademark.value.validate()
  // console.log(isTheResultChecked) // Promise {<pending>}
  let result: any = await requestAddOrUpdateTrademark(aFormForAddOrUpdateTrademark)
  // console.log(result) // {code: 200, message: '成功', data: null, ok: true}
  if (result.code === 200) {
    // 如果进入了这个代码块，那么说明“添加品牌”或“修改品牌”成功
    isThedialogVisible.value = false // 关闭对话框组件
    ElMessage({
      type: 'success',
      // message: result.message,
      message: aFormForAddOrUpdateTrademark.id ? "修改品牌成功" : "添加品牌成功",
      // message: "添加品牌成功",
    })
    // getTheListOfTrademarkThatHaveBeenHad() // 在添加品牌成功后重新获取已有品牌列表，以展示最新的数据
    // 如果现在正在修改品牌（即品牌具备属性“id”），那么在获取品牌列表时，将分页器组件的当前所在页码设置为原来所在的那一页，否则（即当前正在添加品牌）就获取位于第一页的品牌数据↓
    getTheListOfTrademarkThatHaveBeenHad(aFormForAddOrUpdateTrademark.id ? currentPageNumber.value : 1)
    // 把表单中收集到的数据清空↓
    // aFormForAddOrUpdateTrademark.tmName = '' // 清空表单数据中的“品牌名称”
    // aFormForAddOrUpdateTrademark.logoUrl = '' // 清空表单数据中的“品牌图片”
    // 注：由于点击“确定”和“取消”按钮时都要清空已收集的表单数据，这样做不太方便，所以更合理且更方便的做法是把“清空数据”操作放到点击“新增品牌”按钮和“编辑”（即“修改品牌”）按钮时被调用的函数中来执行（这样做的好处是：无论点击“确定”按钮还是“取消”按钮时都能清空已收集的表单数据）↑
  } else {
    // 如果进入了这个代码块，那么说明“新增品牌”或“修改品牌”失败
    ElMessage({
      type: 'error',
      // message: "添加品牌失败",
      message: aFormForAddOrUpdateTrademark.id ? "修改品牌失败" : "添加品牌失败",
    })
    isThedialogVisible.value = false
  }
}
/**
 * 函数“handlerForCancelButton”被用于处理用户点击对话框组件中的取消按钮时，执行的操作
 * @param event 事件对象（注：该参数被定义为“Event”类型）
 */
function handlerForCancelButton(event: Event) {
  isThedialogVisible.value = false
  // 把表单中收集到的数据清空↓
  // aFormForAddOrUpdateTrademark.tmName = '' // 清空表单数据中的“品牌名称”
  // aFormForAddOrUpdateTrademark.logoUrl = '' // 清空表单数据中的“品牌图片”
}
/**
 * 函数“handlerForConfirmButtonInThePopconfirm”被用于处理用户点击弹出框（气泡确认框）组件中的确定按钮时，执行的操作
 */
async function handlerForConfirmButtonInThePopconfirm(id: number) {
  // 点击确定按钮时调用方法，发送删除品牌的请求↓
  let result = await requestDeleteTrademark(id)
  if (result.code == 200) {
    // 这里是删除品牌成功时显示的提示信息↓
    ElMessage({
      type: 'success',
      message: "删除品牌成功",
    })
    // 再次发送请求，以获取最新的展示已有品牌数据的列表，以展示删除后的结果（注：参数的含义是：如果当前页的品牌数据已被删除完毕（即数组长度小于1），那么就获取上一页的数据；否则（即当前页的品牌数据未被删除完毕（即数组长度大于等于1）），就获取当前所在页的那一页的品牌数据）↓
    getTheListOfTrademarkThatHaveBeenHad(anArrayThatStoresTrademarkThatHaveBeenHad.value.length >= 1? currentPageNumber.value : currentPageNumber.value - 1)
  } else {
    // 这里是删除品牌失败时显示的提示信息↓
    ElMessage({
      type: 'error',
      message: "删除品牌失败",
    })
  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>